<template>
	<view class="home">
		<view class="home-search">
			<tn-input
				v-model="searchValue"
				type="text"
				border
				:customStyle="customStyle"
				placeholder="请输入关键字搜索文章..."
				:showRightIcon="true"
				@focus="searchFocus"
				rightIcon="search" />
		</view>
		
		 <tn-swiper :list="carouseList" :effect3d="true" :height="300" @click="openHerf"></tn-swiper>
		 <view class="home-item">
		 	<view v-for="(item,index) in itemCard" :key="index" class="home-item_box" @click="openPages(item)">
				<view :style="{ backgroundImage: item.color}"class="home-item_list">
					<img :src="item.img" alt="" />
				</view>
				<p>{{item.title}}</p>
		 	</view>
		 </view>
		 <view class="home-article">
		 	<h2 class="kaiti one-title">精选博文</h2>
			<view class="home-article_item" v-for="option in blogSelectList" :key="option.id" @click="openDetail(option)">
				<h1 class="kaiti">{{ option.title }}</h1>
				<view class="home-article_item--box">
					<text class="home-article_item--text">{{ option.preface }}</text>
					<img v-if="option.img && option.img != ''" :src="option.img" mode=""></img>
				</view>
				<view class="home-article_item--author">
					<view class="">
						<text class="tn-icon-my-simple-fill tn-color-cyan" style="padding: 10rpx;"></text>
						<text>{{ option.author }}</text>
					</view>
					<text>{{ option.address }}</text>
					<text>{{ option.createTime }}</text>
				</view>
				<view class="home-article_item--system">
				</view>
				<view class="home-article_item--like">
					<view class="iconlike">
						<text class="tn-icon-message" style="padding: 10rpx;"></text>
						<text>{{ option.comment }}</text>
					</view>
					<view class="iconlike">
						<text class="tn-icon-praise" style="padding: 10rpx;"></text>
						<text>{{ option.like }}</text>
					</view>
					<view class="iconlike">
						<text class="tn-icon-eye" style="padding: 10rpx;"></text>
						<text>{{ option.view }}</text>
					</view>
				</view>
			</view>
			
		 </view>
	</view>
</template>

<script>
export default {
	props:{
		carouseList:{
			type:Array,
			default:()=>{ return [] }
		},
		blogSelectList:{
			type:Array,
			default:()=>{ return [] }
		}
	},
	data() {
		return {
			searchValue:'',
			customStyle:{},
			itemCard:[
				{
					title:'前端',
					img: 'http://www.lihynotes.cn:81/songs/web.png',
					path:'/pages/web/index',
					color:'linear-gradient(to right, #4facfe 0%, #00f2fe 100%)'
				},
				{
					title:'后端',
					img: 'http://www.lihynotes.cn:81/songs/back.png',
					path:'/pages/Java/index',
					color:'linear-gradient(to top, #c471f5 0%, #fa71cd 100%)'
				},
				{
					title:'数据库',
					img: 'http://www.lihynotes.cn:81/songs/sql.png',
					path:'/pages/mysql/index',
					color:'linear-gradient(to top, #0ba360 0%, #3cba92 100%)'
				},
				{
					title:'其他',
					img: 'http://www.lihynotes.cn:81/songs/other.png',
					path:'/pages/other/index',
					color:'linear-gradient(to top, #ff0844 0%, #ffb199 100%)'
				},
			]
		};
	},
	onShow() {
		console.log(1111)
	},
	methods: {
		//点击轮播图
		openHerf(val){
			let herf = this.carouseList[val].herf
			uni.navigateTo({
			    url:`/pages/webView/index?herf=${herf}`
			})
		},
		//查看博客详情
		openDetail(item){
			uni.navigateTo({
				url:`/pages/detail/index?id=${item.id}`
			})
		},
		//
		openPages(item){
			uni.navigateTo({
				url:item.path
			})
		},
		searchFocus(){
			uni.navigateTo({
				url:'/pages/search/index'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.home {
	.tn-input{
		justify-content: space-between;
		background-color: #F4F4F4;
	}
	padding: 10rpx 20rpx;
	&-search{
		margin: 20rpx 0;
	}
	&-item{
		margin-top: 20rpx;
		padding: 40rpx 40rpx;
		display: flex;
		justify-content: space-between;
		border-radius: 8rpx;
		background-color: #fff;
		&_box{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			p{
				margin-top: 5rpx;
			}
		}
		&_list{
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			img{
				width: 50%;
				height: 50%;
				
			}
		}
	}
	&-article{
		h2{
			font-size: 36rpx;
			margin: 20rpx;
			font-weight: 200;
		}
		&_item{
			padding: 20rpx;
			box-shadow: rgba(17, 17, 26, 0.1) 0rpx 0rpx 28rpx;
			margin-bottom: 20rpx;
			border-radius: 8rpx;
			h1{
				font-size: 32rpx;
				margin-bottom: 10rpx;
				font-weight: 200;
			}
			&--box{
				display: flex;
				margin-bottom: 26rpx;
				img{
					width: 160rpx;
					height: 90rpx;
				}
			}
			&--text{
				font-size: 28rpx;
				color: #5F7E8B;
				line-height: 42rpx;
				display: -webkit-box; 
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}
			&--author{
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
				color: #838383;
				margin-bottom: 20rpx;
			}
			&--system{
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				color: #838383;
				margin-bottom: 20rpx;
				.iconsize{
					margin-right: 20rpx;
					font-size: 24rpx;
				}
			}
			&--like{
				display: flex;
				font-size: 28rpx;
				color: #838383;
				.iconlike{
					margin-right: 10rpx;
				}
			}
		}
	}
	
	
}
</style>
